Hello World


Posted by wayne201299 on 2023-10-11

React 使用的語法是JSX,JavaScript XML,需要透過Babel編譯後才能執行,可以視作React.createElement,這也導致他的回傳物件都只能由一個element

  render() {
    return (
      <>
        <h1>{this.props.text}</h1>
      </>
    )
  }

傳值方法

父元件可以透過props傳值給子元件

父元件

<HelloWorldFunction text="hello world"></HelloWorldFunction>

子元件

const HelloWorldFunction = (props) => <> {props.text} </>

比較

狀態(state)與屬性(prop)

類別元件 函式型元件
資料類型 物件 物件
用途 元件內部資料,用來儲存會因使用者操作而改動的值 父元件傳給子元件的資料
元件種類限制 ES6 類別元件 ES6 類別元件與函式型元件
值更動限制 只能透過setState()改動 只有父母元件可更動

更動state值會觸發重新渲染所以有嚴格限制不能隨意改動state值

類別元件與函式型元件

類別元件 函式型元件
狀態(state) 可以使用 不能使用
生命週期方法 可以使用 不能使用
渲染 render方法回傳值 函式回傳值
Context API 可以使用 可以使用
效能比較 相同 相同

#React







Related Posts

MTR04_1027

MTR04_1027

form相關元素-Browser Default Styles-更改

form相關元素-Browser Default Styles-更改

Mouse Event 滑鼠事件

Mouse Event 滑鼠事件


Comments